<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>图书管理系统</title>
  <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.1.3/css/bootstrap.min.css" rel="stylesheet">
  <link href="https://cdn.staticfile.org/font-awesome/6.0.0/css/all.min.css" rel="stylesheet">
  <style>
    .book-table th { background-color: #f8f9fa; }
    .search-box { background-color: #f8f9fa; padding: 20px; border-radius: 8px; margin-bottom: 20px; }
    .btn-icon-top {
      width: 60.75px !important; height: 62px !important; flex: none !important;    /* 禁用弹性伸缩 */
      display: flex !important; flex-direction: column; align-items: center; justify-content: center; padding: 10px !important; }
    .btn-icon-top i { font-size: 20px; margin-bottom: 1px; }
  </style>
</head>
<body>
<div class="container mt-4">
  <div class="row">
    <div class="col-12">
      <h1 class="text-center mb-4">
        <i class="fas fa-book"></i> 图书管理系统
      </h1>

      <!-- 统计信息 -->
      <div class="alert alert-info">
        <i class="fas fa-info-circle"></i> 当前共有 <strong th:text="${totalBooks}"></strong> 本图书
      </div>

      <!-- 成功消息 -->
      <div th:if="${successMessage}" class="alert alert-success alert-dismissible fade show" role="alert">
        <span th:text="${successMessage}"></span>
        <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
      </div>

      <!-- 搜索和添加按钮 -->
      <div class="search-box">
        <div class="row">
          <div class="col-md-8">
            <form th:action="@{/books}" method="get" class="d-flex">
              <input type="text" name="keyword" th:value="${keyword}"
                     class="form-control me-2" placeholder="搜索图书书名或作者...">
              <button type="submit" class="btn btn-primary btn-icon-top">
                <i class="fas fa-search"></i> 搜索
              </button>
              <a th:href="@{/books}" class="btn btn-outline-secondary ms-2 btn-icon-top">
                <i class="fas fa-refresh"></i> 重置
              </a>
            </form>
          </div>
          <div class="col-md-4 text-end">
            <a th:href="@{/books/add}" class="btn btn-success">
              <i class="fas fa-plus"></i> 添加图书
            </a>
          </div>
        </div>
      </div>

      <!-- 图书列表 -->
      <div class="card">
        <div class="card-header">
          <h5 class="card-title mb-0">
            <i class="fas fa-list"></i> 图书列表
          </h5>
        </div>
        <div class="card-body">
          <div th:if="${books.empty}" class="text-center py-4">
            <i class="fas fa-book-open fa-3x text-muted mb-3"></i>
            <p class="text-muted">暂无图书数据</p>
            <a th:href="@{/books/add}" class="btn btn-primary">添加第一本图书</a>
          </div>

          <div th:unless="${books.empty}" class="table-responsive">
            <table class="table table-striped table-hover book-table">
              <thead>
              <tr>
                <th>ID</th>
                <th>书名</th>
                <th>作者</th>
                <th>ISBN</th>
                <th>出版年份</th>
                <th>出版社</th>
                <th>操作</th>
              </tr>
              </thead>
              <tbody>
              <tr th:each="book : ${books}">
                <td th:text="${book.id}"></td>
                <td th:text="${book.title}"></td>
                <td th:text="${book.author}"></td>
                <td th:text="${book.isbn}"></td>
                <td th:text="${book.publicationYear}"></td>
                <td th:text="${book.publisher}"></td>
                <td>
                  <a th:href="@{/books/detail/{id}(id=${book.id})}"
                     class="btn btn-sm btn-info" title="查看详情">
                    <i class="fas fa-eye"></i>
                  </a>
                  <a th:href="@{/books/edit/{id}(id=${book.id})}"
                     class="btn btn-sm btn-warning" title="编辑">
                    <i class="fas fa-edit"></i>
                  </a>
                  <a th:href="@{/books/delete/{id}(id=${book.id})}"
                     class="btn btn-sm btn-danger" title="删除"
                     onclick="return confirm('确定要删除这本图书？')">
                    <i class="fas fa-trash"></i>
                  </a>
                </td>
              </tr>
              </tbody>
            </table>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

<script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.1.3/js/bootstrap.bundle.min.js"></script>
</body>
</html>